<template>
  <div class="page-content replay had-tip">
    <!--左边-控制块内容"-->
    <div class="second-menu treeOverMenu" :style="{width: secondMenuWidth}">
      <div class="input">
        <div class="label">设备/通道</div>
        <select-dept-car-input class="value choice-tree" size="small" :clearable="true" placeholder="请选择设备" @selectCange="selectCange"></select-dept-car-input>
      </div>
      <div class="input">
        <div class="label">开始时间</div>
        <el-date-picker class="value time" size="small" align="right" v-model="searchReplayData.starttime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
          :default-value="searchReplayData.starttime" :clearable="false">
        </el-date-picker>
      </div>
      <div class="input">
        <div class="label">结束时间</div>
        <el-date-picker class="value time" size="small" align="right" v-model="searchReplayData.endtime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
          :default-value="searchReplayData.endtime" :clearable="false">
        </el-date-picker>
      </div>
      <div class="input radio">
        <div class="label">存储位置</div>
        <el-radio-group class="value" v-model="searchReplayData.storage">
          <el-radio label="">设备</el-radio>
          <el-radio label="platform">服务器</el-radio>
        </el-radio-group>
      </div>
      <div class="input">
        <div class="label">下载速度</div>
        <el-select class="value" size="small" v-model="downLoadSpeed" placeholder="请选择下载速度">
          <el-option v-for="item in [{id:1,name:'正常'},{id:2,name:'2倍'},{id:4,name:'4倍'}]" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="control-btn">
        <el-button type="primary" size="medium" icon="el-icon-search" :loading="searchDisabled" :disabled="searchDisabled" @click="toSearchReplayData()">搜索</el-button>
      </div>
    </div>
    <!--中间内容-->
    <div class="middle-content" v-show="tableHeight.height!='100%'">
      <div class="left-block " ref="left-block">
        <div class="paly-box">
          <play-jessibuca :screnObjList="playH5List" ref="h5play" @clickScreen="clickScreen" @updateParent="updateParent"></play-jessibuca>
        </div>
        <div class="play-btns">
          <div class="left_ flex_">
            <div class="item">
              <img src="/static/image/video-play.png" alt="" @click="recoveryOrPausePlayVideo()" v-show="playH5List[currentChoiceScreen].state!=1">
              <img src="/static/image/video-pause.png" alt="" @click="recoveryOrPausePlayVideo()" v-show="playH5List[currentChoiceScreen].state==1">
              <div class="tip">{{playH5List[currentChoiceScreen].state==1?'暂停':'播放'}}</div>
            </div>
            <div class="item">
              <img src="/static/image/video-stop.png" alt="" @click="closeVideo()">
              <div class="tip">关闭</div>
            </div>
            <div class="item">
              <img src="/static/image/video-shoot.png" alt="" @click="toPhoto()">
              <div class="tip">拍照</div>
            </div>
            <div class="item">
              <img src="/static/image/video-record.png" alt="" @click="toRecord(true)" v-show="!playH5List[currentChoiceScreen].recording">
              <img src="/static/image/video-record-end.png" alt="" @click="toRecord(false)" v-show="playH5List[currentChoiceScreen].recording">
              <div class="tip">{{playH5List[currentChoiceScreen].recording?"停止":""}}录像</div>
            </div>
            <div class="item flex_ voice">
              <img src="/static/image/video-voice.png" alt="" @click="muteVoice(true)" v-show="!playH5List[currentChoiceScreen].mute">
              <img src="/static/image/video-voice-mute.png" alt="" @click="muteVoice(false)" v-show="playH5List[currentChoiceScreen].mute">
              <el-slider class="input" :min="0" :max="10" :step="1" v-model="playH5List[currentChoiceScreen].volume" @change="volumeChange"></el-slider>
              <div class="tip">音量</div>
            </div>
            <div class="item flex_ speed">
              <div class="btn">
                <img src="/static/image/video-speed-d.png" alt="" @click="toLowSpeed()">
                <div class="tip">{{speedFLow(playH5List[currentChoiceScreen].speed)}}</div>
              </div>
              <div class="btn">
                <img src="/static/image/video-speed-a.png" alt="" @click="toFastSpeed()">
                <div class="tip">{{speedFFase(playH5List[currentChoiceScreen].speed)}}</div>
              </div>
              <el-slider class="input" :min="0" :max="playH5List[currentChoiceScreen].totalTime" :step="1" 
                v-model="playH5List[currentChoiceScreen].progress" @change="progressChange" @mousedown.native="dragStart" @mouseup.native="dragEnd"></el-slider>
              <div v-if="playH5List[currentChoiceScreen].hadUsed">{{getProgressText}}</div>
            </div>
          </div>
          <div class="right_ flex_">
            <div class="item" @click="closeAllVideo()">
              <img src="/static/image/video-stop-all.png" alt="">
              <div class="tip-info">关闭所有视频</div>
            </div>
            <div class="item tip"></div>
            <div class="item" @click="changeScreen(1)">
              <img src="/static/image/screen-1.png" alt="">
              <div class="tip-info">分1屏</div>
            </div>
            <div class="item" @click="changeScreen(2)">
              <img src="/static/image/screen-2.png" alt="">
              <div class="tip-info">分2屏</div>
            </div>
            <div class="item" @click="changeScreen(4)">
              <img src="/static/image/screen-4.png" alt="">
              <div class="tip-info">分4屏</div>
            </div>
            <div class="item" @click="changeScreen(9)">
              <img src="/static/image/screen-9.png" alt="">
              <div class="tip-info">分9屏</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--底部表单-->
    <div class="bottom-table" :style="tableHeight">
      <div class="border-bottom-tip tip cursor-pointer" @click="changeSidesWidth()">
        <i class="fa fa-angle-down" aria-hidden="true" v-if="tableHeight.height!='0'"></i>
        <i class="fa fa-angle-up" aria-hidden="true" v-else></i>
      </div>
      <div class="bottom-table-content">
        <div class="bottom-table-content-table">
          <el-table header-cell-class-name="table-head-class" tooltip-effect="dark" :data="tableData" v-loading="tableLoading" :stripe="true" :border="true" height="100%">
            <el-table-column type="index" width="65" :label="'序号'" class-name="table-row-class" fixed />
            <el-table-column :label="'设备号'" width="120" show-overflow-tooltip class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.deviceName }}</template>
            </el-table-column>
            <el-table-column :label="'通道编号'" width="80" show-overflow-tooltip class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.Name }}</template>
            </el-table-column>
            <el-table-column :label="'开始时间'" width="160" class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.starttime }}</template>
            </el-table-column>
            <el-table-column :label="'结束时间'" width="160" class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.endtime }}</template>
            </el-table-column>
            <el-table-column :label="'文件大小'" width="100" show-overflow-tooltip class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.FileSize|sizeM }}</template>
            </el-table-column>
            <el-table-column :label="'存储位置'" width="80" class-name="table-row-class">
              <template slot-scope="scope">{{ scope.row.storage=="platform"?"服务器":"设备" }}</template>
            </el-table-column>
            <el-table-column :label="'下载进度'" min-width="180" class-name="table-row-class">
              <template slot-scope="scope">
                <div class="myProgress" v-if="scope.row.progress.indexOf('%')>-1">
                  <div>下载进度</div>
                  <el-progress text-inside :stroke-width="16" :percentage="scope.row.progress|progressF"></el-progress>
                </div>
                <span v-if="scope.row.progress.indexOf('%')==-1">{{scope.row.progress}}</span>
              </template>
            </el-table-column>
            <el-table-column :label="'操作'" class-name="table-row-class" fixed="right" width="140" :resizable="false">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="toPlay(scope.row,scope.$index)" :loading="scope.row.playloading" :disabled="scope.row.playloading">
                  {{!scope.row.playloading?"播放":""}}
                </el-button>
                <el-button size="mini" type="primary" @click="toDownload(scope.$index, scope.row)" 
                  :loading="!!scope.row.downloading" :disabled="!!scope.row.downloading">
                  {{!scope.row.downloading?"下载":""}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page-content {
  display: flex;
  position: relative;
  flex-direction: column;
  .treeOverMenu{
    box-sizing: border-box;
    padding: 30px 13px;
    font-size: 14px;
    .input{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .label{
        margin-right: 10px;
        white-space: nowrap;
      }
      .value{
        flex-grow: 1;
        >>>.el-input__inner{
          padding-right: 30px;
        }
        &.time{
          >>>.el-input__inner{
            padding-right: 5px;
          }
        }
      }
      &.radio{
        .value{
          display: flex;
          flex-wrap: wrap;
          >>>.el-radio{
            margin-right: 15px;
            display: flex;
            .el-radio__label{
              padding-left: 2px;
              white-space: normal;
            }
          }
        }
      }
    }
    .control-btn{
      .el-button{
        width: 100%;
        background-color: var(--main-bg-color-act);
        border-color: var(--main-bg-color-act);
        &:last-child{
          float: right;
        }
        &:hover{
          border-color: var(--main-bg-color);
          background-color: var(--main-bg-color);
        }
      }
    }
    .choice-car{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.5);
      .choice-box{
        width: 90%;
        height: 90%;
        margin: 15% auto 0;
        background-color: var(--main-bg-color);
        position: relative;
        .choice-tree{
          width: 100%;
          height: calc(100% - 72px);
        }
        .btns{
          padding-top: 20px;
          text-align: center;
          border-top: 1px solid rgba(255,255,255,0.1);
        }
        .close{
          position: absolute;
          top: -20px;
          right: -13px;
          font-size: 24px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .middle-content{
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    overflow: hidden;
    .left-block{
      position: relative;
      width: 100%;
      height: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      box-sizing: border-box;
      border-right: 12px solid #f3f4f5;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .paly-box{
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        height: calc(100% - 30%);
        >>>.jessibuca-container .jessibuca-recording .jessibuca-icon-recordStop{
          display: none !important;
        }
      }
      .play-btns{
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        padding: 2px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .flex_{
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .left_{
          .item{
            margin-right: 5px;
            height: 26px;
            cursor: pointer;
            position: relative;
            img{
              width: 26px;
              height: 26px;
            }
            .tip{
              position: absolute;
              white-space: nowrap;
              z-index: 1401;
              top: -22px;
              background: #fff;
              padding: 0 6px;
              line-height: 20px;
              height: 20px;
              border: 1px solid var(--main-bg-color);
              color: var(--main-bg-color);
              border-radius: 4px;
              overflow: hidden;
              display: none;
              font-size:12px;
            }
            &:hover{
              .tip{
                display: block;
              }
            }
            &.voice{
              margin-right: 15px;
              .el-slider{
                margin-left: 15px;
                width: 50px;
              }
            }
            &.speed{
              font-size:12px;
              .btn{
                position: relative;
                width: 26px;
                height: 26px;
                .tip{
                  display: none;
                }
                &:hover{
                  .tip{
                    display: block;
                  }
                }
              }
              .el-slider{
                margin: 0 15px;
                width: 140px;
              }
            }
            &:last-child{
              margin-right: 0;
            }
          }
        }
        .right_{
          .item{
            position: relative;
            margin-left: 10px;
            height: 20px;
            cursor: pointer;
            img{
              width: 20px;
              height: 20px;
            }
            &.tip{
              width: 2px;
              height: 20px;
              background-color: var(--main-bg-color);
              cursor: inherit;
            }
            &:first-child{
              margin-left: 0;
            }
            .tip-info{
              position: absolute;
              top: -27px;
              left: -40px;
              padding: 3px 10px;
              white-space: nowrap;
              background-color: #fff;
              border-radius: 4px;
              border: 1px solid var(--main-bg-color-act);
              font-size: 12px;
              text-align: center;
              color: var(--main-bg-color-act);
              z-index: 1401;
              display: none;
            }
            &:hover{
              cursor: pointer;
              .tip-info{
                display: block;
              }
            }
          }
        }
      }
    }
    .map-contain {
      height: 100%;
      width: 100%;
      overflow: hidden;
      >>>.map {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .mapInfDialog{
          width: 310px;
        }
      }
    }
  }
  .bottom-table {
    position: relative;
    height: 0;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 999;
    .border-bottom-tip{
      position: absolute;
      top: -15px;
      right: 26%;
      width: 50px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      .fa{
        position: absolute;
        top: -3px;
        color: #fff;
        font-size: 20px;
      }
      &.tip{
        border-bottom: 15px solid var(--main-bg-color-act);
        .fa{
          left: 18px;
        }
      }
    }
    .bottom-table-content {
      position: relative;
      flex-grow: 0;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      .bottom-table-content-table{
        position: relative;
        width: calc(100% - 44px);
        flex-shrink: 1;
        flex-grow: 1;
        min-height: 100px;
        height: 100%;
      }
    }
  }
  .myProgress{
    width: 100%;
    display: flex;
    align-items: center;
    .el-progress{
      flex-grow: 1;
      margin-left: 5px;
    }
  }
}
/* 屏幕（小于等于 1250px） */
@media ( max-width : 1250px) {
	.page-content .middle-content .left-block .play-btns .left_ .item {
		margin-right: 4px;
    img{
      width: 24px;
      height: 24px;
    }
    &.voice .el-slider{
      width: 50px;
    }
    &.speed .el-slider{
      width: 100px;
    }
	}
}
</style>

<script>
let intervalProg = null;//刷新设备类型视频下载进度
export default {
  name: "replayVideo",
  props:{
    secondMenuWidth: {
      type: String
    }
  },
  data() {
    return {
      serverParamsData: null,//系统播放参数设置
      playH5List:[//默认1个窗口
        {id: this.randomStr(8),hadUsed: false,state: 0,volume:10,mute:false,progress:100,totalTime:100,speed:100,isDevice:true,recording:false}
      ],
      currentChoiceScreen: 0,//当前选中的窗口
      currentChoice: {},//当前选中的设备
      currentPlay: {},//当前播放的设备
      searchReplayData:{
        device: "",
        channel: "",//通道
        starttime: '',
        endtime: '',
        storage: "",
      },
      tableHeight: {height: "236px"},//底部内容高度
      searchDisabled: false,//控制搜索按钮是否可用
      tableLoading: false,//底部table数据loading
      tableData: [],//底部table数据--文件列表
      waitingDownList: [],//等待下载队列（因为一次只能下载一个文件，其他的要等待上一个完成才能开始进行）
      downLoadSpeed: 4
    };
  },
  filters: {
    sizeM(val=0){
      if(val){
        let result = 0;
        result = (val/1024/1024).toFixed(2);
        return result + "M";
      }else{
        return "--";
      }
    },
    progressF(text){
      if(text.indexOf("%")>-1){
        text = text.split("%")[0];
        return parseInt(text);
      }else{
        return text;
      }
    }
  },
  computed: {
    getProgressText(){
      let text = this.tranlateTime(this.playH5List[this.currentChoiceScreen].progress)+"/"+this.tranlateTime(this.playH5List[this.currentChoiceScreen].totalTime);
      return text;
    }
  },
  mounted(){
    this.toInitData();
  },
  beforeDestroy(){
    this.closeAllVideo();
    if(intervalProg){
      clearInterval(intervalProg);
      intervalProg = null;
    }
  },
  methods: {
    speedFLow(val){
      let text = "";
      switch(val) {
        case 100:
          text = "快退";
          break;
        case 75:
          text = "快退1倍";
          break;
        case 50:
          text = "快退2倍";
          break;
        case 25:
          text = "快退4倍";
          break;
        default:
          text = "快退";
          break;
      }
      return text;
    },
    speedFFase(val){
      let text = "";
      switch(val) {
        case 400:
          text = "快进4倍";
          break;
        case 200:
          text = "快进2倍";
          break;
        case 100:
          text = "快进";
          break;
        default:
          text = "快进";
          break;
      }
      return text;
    },
    toInitData(){//首次进入初始化
      let that = this;
      let now = new Date().getTime();
      that.searchReplayData.starttime = that.formatTime(now-3*60*60*1000);
      that.searchReplayData.endtime = that.formatTime(now);
    },
    selectCange(data,val){//选择设备
      console.log(val,data);
      if(!val){//清空选定的设备
        this.currentChoice = {};
        this.searchReplayData.channel = "";
        this.searchReplayData.device = "";
      }else{//选定设备
        this.searchReplayData.device = data.device;
        this.searchReplayData.channel = data.id;
        this.currentChoice = JSON.parse(JSON.stringify(data));
      }
    },
    changeSidesWidth(){//隐藏或者展示
      if(this.tableHeight.height=="0"){//要弹出
        this.tableHeight = {height: "236px"};
      }else{//要隐藏
        this.tableHeight = {height: "0"};
      }
    },
    resetPlayer(){//点击搜索时，需要重置播放器和所有相关数据
      let that = this;
      that.closeAllVideo();
      that.tableData = [];
      that.currentPlay = JSON.parse(JSON.stringify(that.currentChoice));
    },
    toSearchReplayData(){//查询指定资源数据
      if(this.searchDisabled)return;
      if(!this.searchReplayData.device){
        this.$message.warning("请先选择设备通道！");
        return;
      }
      if(new Date(this.searchReplayData.starttime).getTime()>=new Date(this.searchReplayData.endtime).getTime()){
        this.$message.warning("结束时间要晚于开始时间！");
        return;
      }
      let that = this;
      that.tableLoading = true;
      that.searchDisabled = true;
      that.resetPlayer();
      let params = JSON.parse(JSON.stringify(that.searchReplayData));
      // params.starttime = new Date(params.starttime);
      // params.endtime = new Date(params.endtime);
      params.starttime = params.starttime.replace(" ","T");
      params.endtime = params.endtime.replace(" ","T");
      that.$http.postData("/vod/query",params).then(function(res){
        if(res.RecordList&&res.RecordList.length>0){
          that.tableLoading = false;
          that.searchDisabled = false;
          res.RecordList.forEach(o=>{
            o.starttime = that.formatTime(o.StartTime);
            o.endtime = that.formatTime(o.EndTime);
            if(that.tableData.findIndex(_=>_.ID==o.ID&&_.starttime==o.starttime)==-1){
              o.myId = that.randomStr(10);
              o.progress = "";
              o.playloading = false;
              o.downloading = 0;
              o.terminalId = that.currentPlay.device;
              o.deviceName = that.currentPlay.parentName;
              that.tableData.push(o);
            }
          });
        }else{
          that.tableLoading = false;
          that.searchDisabled = false;
        }
      }).catch(function(err){
        console.log(err);
        that.tableLoading = false;
        that.searchDisabled = false;
      });
    },
    getScreenNums(num){//设置分屏的数目----共用
      let result = 1;
      if(num<3){
        result = num;
      }else if(num<=4){
        result = 4;
      }else if(num<=9){
        result = 9;
      }else if(num<=16){
        result = 16;
      }else if(num<=25){
        result = 25;
      }else if(num<=36){
        result = 36;
      }else{
        result = 64;
      }
      return result;
    },
    changeScreen(num){//分屏----共用
      num = this.getScreenNums(num);
      console.log("我要分频",num);
      let start = this.playH5List.length;
      if(num>start){//增加
        for (let i = start; i < num; i++) {
          this.playH5List.push({id: this.randomStr(8),hadUsed: false,state: 0,volume:10,mute:false,progress:100,totalTime:100,speed:100,isDevice:true,recording:false});
        }
      }else if(num<start){//减少
        let usedNum=0;
        for (let i = 0; i < this.playH5List.length; i++) {
          if(this.playH5List[i].hadUsed){
            ++usedNum;
          }
        }
        if(num<usedNum){
          for (let h = 0; h < num; h++) {
            this.playH5List[h].hide = true;
          }
        }
        let delN = start-num;//要减少的数量
        for (let i = 0; i < this.playH5List.length; i++) {
          if(delN>0){
            if(!this.playH5List[i].hadUsed){
              --delN;
              console.log(start,num,delN);
              this.playH5List.splice(i,1);
              --i;
            }
          }else{
            break;
          }
        }
        if(num<=this.currentChoiceScreen){
          this.$refs.h5play.clickScreen(this.playH5List[0]);//默认选中第一个窗口
        }
      }
    },
    clickScreen(data){//选中了某个播放器窗口
      this.currentChoiceScreen = this.playH5List.findIndex(_=>_.id==data.id);
    },
    toPlay(row,index){//平台下发远程录像回放请求,type代表是0正常，1快进，2快退
      let that = this;
      if(that.playH5List.findIndex(_=>_.id==row.screenId)>-1){
        that.$message({
          type: 'warning',
          message: "该视频正在播放中！",
          duration: that.$store.state.alertDuration
        });
        return;
      }
      if(!row.storage&&that.playH5List.findIndex(_=>_.channel==row.ID)>-1){
        that.$message({
          type: 'warning',
          message: "当前已存在相同的播放通道！",
          duration: that.$store.state.alertDuration
        });
        return;
      }
      let freeScreen = that.playH5List.findIndex(_=>!_.hadUsed);
      if(freeScreen==-1){
        if(that.playH5List.length>=9){
          that.$message({
            type: 'warning',
            message: "已达到最大播放数量！",
            duration: that.$store.state.alertDuration
          });
          return;
        }else{//需要添加窗口
          freeScreen = this.playH5List.length;
          that.changeScreen(freeScreen+1);
        }
      }
      row.screenId = that.playH5List[freeScreen].id;//////////////////////////
      that.playH5List[freeScreen].hadUsed = true;
      that.playH5List[freeScreen].startTime = row.starttime;
      that.playH5List[freeScreen].endTime = row.endtime;
      that.playH5List[freeScreen].name = row.deviceName;
      that.playH5List[freeScreen].channel = row.ID;
      that.playH5List[freeScreen].terminalId = row.terminalId;
      that.playH5List[freeScreen].progress = 0;
      that.playH5List[freeScreen].totalTime = parseInt((new Date(row.endtime).getTime()-new Date(row.starttime).getTime())/1000);
      if(row.storage=="platform"&&!!row.url){//服务器
        let url = row.url;
        if(row.url.indexOf("http")==-1){
          url = location.origin+row.url;
        }
        that.playH5List[freeScreen].isDevice = false;
        row.playloading = true;
        console.log(url);
        setTimeout(function(){
          that.$refs.h5play.specifyPlaybackVideoH5(freeScreen,url);//第几个窗口，从0开始
          that.$refs.h5play.clickScreen(that.playH5List[freeScreen]);
        },100);
      }else if(!row.storage){//设备
        row.playloading = true;
        that.playH5List[freeScreen].isDevice = true;
        setTimeout(function(){
          that.$refs.h5play.specifyPlaybackVideoH5(freeScreen);//第几个窗口，从0开始
          that.$refs.h5play.clickScreen(that.playH5List[freeScreen]);
        },100);
      }
    },
    updateParent(item){//播放器回调更新数据
      let that = this;
      let sIndex = that.playH5List.findIndex(_=>_.id==item.screenId);
      let rowI = that.tableData.findIndex(_=>_.screenId==item.screenId);
      if(item.oprateType==1){//播放单个时触发
        that.playH5List[sIndex].hadUsed = true;//标志为已使用
        that.playH5List[sIndex].state = 1;//标志为播放状态
      }else if(item.oprateType==2){//清除单个时触发
        if(item.needReplay){//需要程序直接重新开始回放
          that.playH5List[sIndex].hadUsed =false;
          that.playH5List[sIndex].state ="";
          that.playH5List[sIndex].mute =false;
          // that.playH5List[sIndex].progress =0;//从断点开始播放
          that.playH5List[sIndex].offsetTime = that.playH5List[sIndex].progress;
          that.playH5List[sIndex].speed =100;
          that.playH5List[sIndex].recording = false;
          that.$refs.h5play.specifyPlaybackVideoH5(sIndex);//第几个窗口，从0开始
          that.$message({
            message: "当前播放流已断开，将重新开始播放！",
            type: 'warning',
            duration: that.$store.state.alertDuration*2
          });
        }else{
          if(rowI>-1){
            that.tableData[rowI].playloading = false;
            that.tableData[rowI].screenId = "";
          }
          that.playH5List[sIndex].hadUsed =false;
          that.playH5List[sIndex].volume =10;
          that.playH5List[sIndex].mute =false;
          that.playH5List[sIndex].progress =100;
          that.playH5List[sIndex].totalTime =100;
          that.playH5List[sIndex].offsetTime = 0;
          that.playH5List[sIndex].speed =100;
          that.playH5List[sIndex].state ="";
          that.playH5List[sIndex].startTime = "";
          that.playH5List[sIndex].endTime = "";
          that.playH5List[sIndex].name = "";
          that.playH5List[sIndex].channel = "";
          that.playH5List[sIndex].terminalId = "";
          that.playH5List[sIndex].isDevice = true;
          that.playH5List[sIndex].recording = false;
        }
      }else if(item.oprateType==3){//播放失败了
        if(rowI>-1){
          that.tableData[rowI].screenId = "";
          that.tableData[rowI].playloading = false;
        }
        that.playH5List[sIndex].hadUsed =false;
        that.playH5List[sIndex].volume =10;
        that.playH5List[sIndex].mute =false;
        that.playH5List[sIndex].progress =100;
        that.playH5List[sIndex].totalTime =100;
        that.playH5List[sIndex].offsetTime = 0;
        that.playH5List[sIndex].speed =100;
        that.playH5List[sIndex].state ="";
        that.playH5List[sIndex].startTime = "";
        that.playH5List[sIndex].endTime = "";
        that.playH5List[sIndex].name = "";
        that.playH5List[sIndex].channel = "";
        that.playH5List[sIndex].terminalId = "";
        that.playH5List[sIndex].isDevice = true;
        that.playH5List[sIndex].recording = false;
      }else if(item.oprateType==9){//更新播放进度条进度
        that.playH5List[item.index].progress = item.progress;
      }else if(item.oprateType==4){//触发关闭全部
        that.closeAllVideo();
      }else if(item.oprateType==7){//录像触发
        that.playH5List[sIndex].recording = item.bool;
        that.$refs.h5play.recordVideo(sIndex,item.bool);
      }
    },
    recoveryOrPausePlayVideo(){//由暂停恢复到播放状态或者暂停播放
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!!this.playH5List[this.currentChoiceScreen].state){
        if(this.playH5List[this.currentChoiceScreen].state==1){
          this.playH5List[this.currentChoiceScreen].state = 2;
          this.$refs.h5play.pausePlaybackVideoH5(this.currentChoiceScreen);
        }else if(this.playH5List[this.currentChoiceScreen].state==2){
          this.playH5List[this.currentChoiceScreen].state = 1;
          this.$refs.h5play.recoveryPlaybackVideoH5(this.currentChoiceScreen);
        }
      }
    },
    toPhoto(){//抓拍
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!!this.playH5List[this.currentChoiceScreen].state){
        this.$refs.h5play.screenshotH5(this.currentChoiceScreen);
      }
    },
    toRecord(type){//录像
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!!this.playH5List[this.currentChoiceScreen].state&&this.playH5List[this.currentChoiceScreen].recording!==type){
        this.$refs.h5play.recordVideo(this.currentChoiceScreen,type);
        let that = this;
        setTimeout(() => {
          that.playH5List[that.currentChoiceScreen].recording = type;
        }, 1600);
      }
    },
    muteVoice(bool){//静音或最大
      if(this.playH5List[this.currentChoiceScreen].hadUsed){
        this.playH5List[this.currentChoiceScreen].mute = bool
        this.$refs.h5play.setVideoVolumeH5(this.currentChoiceScreen,bool?0:parseFloat(this.playH5List[this.currentChoiceScreen].volume/10));
      }
    },
    volumeChange(val){//调整音量(实际是0-1，显示是0-10)
      if(this.playH5List[this.currentChoiceScreen].hadUsed){
        this.$refs.h5play.setVideoVolumeH5(this.currentChoiceScreen,parseFloat(val/10));
      }
    },
    toLowSpeed(){//快退
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!this.playH5List[this.currentChoiceScreen].isKeyPlay){
        let speed = 100;
        switch(this.playH5List[this.currentChoiceScreen].speed) {
          case 100:
            speed = 75;
            break;
          case 75:
            speed = 50;
            break;
          case 50:
            speed = 25;
            break;
          case 25:
            speed = 100;
            break;
          default:
            break;
        }
        this.playH5List[this.currentChoiceScreen].speed = speed;
        this.$refs.h5play.lowPlaybackVideo(this.currentChoiceScreen);
      }
    },
    toFastSpeed(){//快进
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!this.playH5List[this.currentChoiceScreen].isKeyPlay){
        let speed = 100;
        switch(this.playH5List[this.currentChoiceScreen].speed) {
          case 100:
            speed = 200;
            break;
          case 200:
            speed = 400;
            break;
          case 400:
            speed = 100;
            break;
          default:
            break;
        }
        this.playH5List[this.currentChoiceScreen].speed = speed;
        this.$refs.h5play.fastPlaybackVideo(this.currentChoiceScreen);
      }
    },
    closeVideo(){//关闭播放
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!!this.playH5List[this.currentChoiceScreen].state){
        this.playH5List[this.currentChoiceScreen].state = 0;
        this.$refs.h5play.stopPlaybackVideoH5(this.currentChoiceScreen);
      }
    },
    closeAllVideo(){//关闭所有视频----共用
      for (let i = 0; i < this.playH5List.length; i++) {
        if(this.playH5List[i].hadUsed){
          console.log("--------",i);
          this.playH5List[i].state = 0;
          this.$refs.h5play.stopPlaybackVideoH5(i);
        }
      }
    },
    progressChange(val){//播放进度变化---拖动时才会触发，js改变progress不会触发----第三个触发
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&!this.playH5List[this.currentChoiceScreen].isKeyPlay){
        console.log("播放进度变化---拖动时才会触发，js改变progress不会触发",val)
        this.playH5List[this.currentChoiceScreen].offsetTime = val;
        this.playH5List[this.currentChoiceScreen].state = 2;
        this.$refs.h5play.gragePlaybackVideo(this.currentChoiceScreen);
      }
    },
    dragStart(e){//拖动播放进度调试加一个标志----第一个触发
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&e.target&&e.target.className.indexOf("el-slider__button")>-1&&e.target.className.indexOf("dragging")>-1){
        console.log("/拖动播放进度调试加一个标志----第一个触发",e.target.className);
        this.playH5List[this.currentChoiceScreen].state = 2;
      }
    },
    dragEnd(e){//拖动播放进度调试加一个标志----第二个触发
      if(this.playH5List[this.currentChoiceScreen].hadUsed&&e.target&&e.target.className.indexOf("el-slider__button")>-1&&e.target.className.indexOf("dragging")>-1){
        console.log("/拖动播放进度调试加一个标志----第二个触发",e.target.className);
        this.playH5List[this.currentChoiceScreen].state = 1;
      }
    },
    
    toDownload(index,row){//文件下载
      // console.log(row);
      if(row.storage=="platform"){//服务器
        if(row.url){
          window.open(row.url);
        }
      }else if(!row.storage){//设备
        if(row.disabled)return;
        row.disabled = true;
        if(row.downloading==1&&row.progress.indexOf("%")>-1){//在下载中，中止下载
          row.disabled = false;
        }else if(row.downloading==1&&row.progress=="等待下载中..."){//在排队等待中，中止下载---从等待队列中去掉
          let idx = this.waitingDownList.findIndex(_=>_.myId==row.myId);
          row.downloading = 0;
          row.disabled = false;
          row.progress = "";
          this.waitingDownList.splice(idx,1);
        }else if(row.downloading==2){
          console.log("下载到本地中，不作处理");
          row.disabled = false;
        }else{//开始下载
          if(this.tableData.findIndex(_=>_.downloading==1&&_.progress.indexOf("%")>-1)>-1){//如果有设备类型正在下载中，则要加到下载队列里面，并做好排队序号，等待前一个下载完了，执行下载下一个等待任务
            row.progress = "等待下载中...";
            row.downloading = 1;
            row.disabled = false;
            row.index = index;
            this.waitingDownList.push(row);
          }else{
            this.downloadDV(row);
          }
        }
      }
    },
    refreshProgress(){//刷新设备类型视频下载进度
      let that = this;
      if(intervalProg){
        clearInterval(intervalProg);
        intervalProg = null;
      }
      intervalProg = setInterval(function(){
        let needClearItv = true;
        for(let i = 0; i < that.tableData.length; i++) {
          let textOk = that.tableData[i].progress!==""&&that.tableData[i].progress!=="下载失败"&&that.tableData[i].progress!=="下载成功"&&that.tableData[i].progress!=="等待下载中...";
          if(textOk&&(that.tableData[i].downloading==1||that.tableData[i].downloading==2)){
            needClearItv = false;
            if(!that.tableData[i].noResponse){//加个是否已响应判断（接口相应可能超过两秒），响应了才重新请求，反之则跳过这一次
              that.tableData[i].noResponse = true;
              if(that.tableData[i].streamId){
                that.$http.postData('/download/progress',{id:that.tableData[i].streamId}).then(function(res){
                  that.tableData[i].noResponse = false;
                  if (!res.code&&!res.data.status) {
                    if(res.data.stop>0&&that.tableData[i].progress.indexOf('%')>-1&&parseInt(that.tableData[i].progress)>=0){
                      let percent = res.data.duration/((res.data.stop-res.data.start)*10);
                      console.log(percent);
                      that.tableData[i].progress = parseInt(percent)+"%";
                      if(percent>=99.9){
                        that.tableData[i].disabled = false;
                        that.tableData[i].downloading = 0;
                        that.tableData[i].progress="下载成功";
                      }
                    }else{
                      that.tableData[i].disabled = false;
                      that.tableData[i].downloading = 0;
                      that.tableData[i].progress="下载成功";
                    }
                  }
                }).catch((err)=>{
                  that.tableData[i].noResponse = false;
                });
              }
            }
          }
        }
        if(needClearItv&&that.waitingDownList.length>0){//执行下一个等待下载队列
          let row_ = that.waitingDownList.shift();
          row_.downloading = 0;
          that.toDownload(row_.index,row_);
        }else{
          if(needClearItv&&!!intervalProg){
            clearInterval(intervalProg);
            intervalProg = null;
          }
        }
      },3000);
    },
    downloadDV(row){//下载设备类型视频
      let that = this;
      let params = {
        device:row.terminalId,
        starttime:row.starttime.replace(" ","T"),
        endtime:row.endtime.replace(" ","T"),
        channel:row.ID,
        speed:that.downLoadSpeed//下载速度 1/2/4 倍速度
      };
      that.$http.postData("/record/download",params).then(function(res){
        if (!res.code) {
          row.disabled = false;
          if(!!res.url) {
            row.url = res.url;
            row.streamId =  res.id;//流ID，用于查询进度
            row.progress = "0%";
            row.downloading = 1;
            window.open(row.url);
            that.refreshProgress();
            that.$message({
              message: "文件下载任务提交成功！",
              type: 'success',
              duration: that.$store.state.alertDuration
            });
          }
        }
      }).catch((err)=>{
        row.disabled = false;
        console.log(err);
      });
    },
  }
};
</script>
